<template>
	<view class="content">
		<view class="head">
			<image src="@/static/txyf.png" alt="" class="topimg"> </image>
			<view style="width: 100%;position: absolute;bottom:0;z-index: 1000;">
				<u-tabs class="tabls" :activeStyle="{
					fontWeight: 'bold',
				}" lineColor='#3DB020' lineHeight='4' itemStyle="height:108rpx;width:25%" :list="list" @click="changeTab"
					lineWidth="30"></u-tabs>
			</view>
		</view>
		<view class="mianBody">
			<template v-if="targertIndex==0">
				<itemFile v-for="(item,index) in  receivedList" @click.native="toDetail(item,true)" :item='item' :key="index"
					color='#f7f7f7'>
					<view class="soltValue" @click.stop>
						<p class="total">合计（净重）：<span>{{item.totalWasteNetWeight}}</span>kg</p>
						<view style="margin-top:28rpx" class="edict-button">
							<u-button color="#999999" :plain="true" text="作废" @click.stop='remove(item)'></u-button>
							<u-button color="#3DB020" :plain="true" text="编辑" @click.stop='edict(item)'></u-button>
						</view>
					</view>
				</itemFile>

			</template>
			<template v-else-if="targertIndex==1">

				<view style="padding:0 30rpx;position: relative;background:white;">
					<u-search bgColor='#fff' class="u-search__actiondata" borderColor='#3DB020' :show-action="false"
						placeholder="日照香炉生紫烟" v-model="keyword"></u-search>
				</view>
				<view class="serchCard">
					<itemFile v-for="(item,index) in ysylist" :item='item' :key="index" color='#f7f7f7'>
						<view style="display: flex;justify-content: space-between;">
							<p class="total">合计（净重）：<span>{{item.totalWasteNetWeight}}</span>kg</p>
							<p class="total">复合重量（净重）：<span>{{item.revisedWeight}}</span>kg</p>
						</view>
					</itemFile>

				</view>

			</template>
			<template v-else-if="targertIndex==2">
				<itemFile v-for="(item,index) in zfList" @click.native="toDetail(item,false)" :item='item' :key="index" color='#f7f7f7'>
					<view class="soltValue">
						<p class="total" style="text-align: left;">合计（净重）：<span>{{item.totalWasteNetWeight}}</span>kg
						</p>
					</view>
				</itemFile>、

			</template>

		</view>
		<u-loadmore :status="status" dashed />
	</view>
</template>

<script>
	import {
		info,
		invalid
	} from '../../utils/api.js'
	export default {
		data() {
			return {
				targertIndex: 0,
				status: 'loading',
				parms: {
					pageNo: 1,
					pageSize: 10,
					total: 0,
				},
				list: [{
					name: '待收运',
				}, {
					name: '已收运',
				}, {
					name: '已作废'
				}, ],
				receivedList: [], //代收运
				zfList: [], //代收运
				totalList: [],
				ysylist: [],
			}
		},
		onShow() {
			this.logList()
		},
		onReachBottom() {
			if (this.parms.total == this.receivedList.length) {
				this.status = 'nomore'
				return
			}
			this.parms.pageNo += 1
			this.logList()
		},
		methods: {
			toDetail(item,value) {
				uni.navigateTo({
					url: `/pages/Receivingdetail/Receivingdetail?id=${item.id}&show=${value}`
				})
			},
			remove(item) {
				let self = this
				uni.showModal({
					title: '提示',
					content: '确定作废当前数据？',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定', item);
							invalid({
								id: item.id
							}).then(res => {
								self.logList()
								uni.$u.toast('作废成功!')
							}).catch(err => {
								uni.$u.toast('作废失败!')
							})
							// 用户点击了确定，执行相应的逻辑
						}
					}
				});
			},
			logList() {
				info(this.parms).then(res => {
					let total = res.data.totalPage * res.data.totalRows
					this.parms.total = total
					if (res.data.rows.length > 0) {
						this.totalList = [...this.totalList, ...res.data.rows]
					}
					if (this.parms.total == this.totalList.length) {
						this.status = 'nomore'
					}
					this.totalList.map(el => {
						let obj = {
							id: el.id,
							title: el.serialNo,
							revisedWeight: el.revisedWeight,
							totalWasteNetWeight: el.totalWasteNetWeight,
							child: [{
									width: '100%',
									title: '客户名称',
									mark: el.mdcInstitutionName
								},
								{
									width: '100%',
									title: '客户简称',
									mark: el.mdcInstitutionShortName
								},
								{
									width: '100%',
									title: '客户地址',
									mark: el.mdcInstitutionAddress
								},
								{
									width: '100%',
									title: '下单时间',
									mark: el.createTime
								},
							]
						}
						if (el.status == '已作废') {
							this.zfList.push(obj)
						} else if (el.status == '待收运') {
							this.receivedList.push(obj)
						} else {
							this.ysylist.push(obj)
						}
					})

				})
			},
			pushlog() {
				uni.navigateTo({
					url: '/pages/Receivingdetail/Receivingdetail'
				})

			},
			changeTab(item) {
				this.targertIndex = item.index
				console.log("0000", item)
			},
			edict(item) {
				uni.navigateTo({
					url: `/pages/Receivingedict/Receivingedict?id=${item.id}`
				})

			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.serch {
		width: 690rpx;
		height: 70rpx;
		border: 2rpx solid #3db020;
		border-radius: 36rpx;
		margin: auto;
	}

	.tabls {
		width: 100%;
		position: relative;
	}

	.serchCard {
		height: calc(100vh - 460rpx);
		overflow: auto;
	}

	.topimg {
		position: absolute;
		top: 96rpx;
		left: 30rpx;
		width: 270rpx;
		height: 60rpx;
	}

	.head {
		width: 750rpx;
		height: 276rpx;
		position: relative;
		top: 0;
		z-index: 1;
		background: url(@/static/sy.png) no-repeat;
		background-size: contain;
	}

	.total {
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC-Semibold;
		font-weight: Semibold;
		text-align: right;
		color: #333333;

		span {
			font-size: 40rpx;
		}
	}

	.soltValue {
		text-align: right;

		.total {
			font-size: 26rpx;
			font-family: PingFang SC, PingFang SC-Semibold;
			font-weight: Semibold;
			text-align: right;
			color: #333333;

			span {
				font-size: 40rpx;
			}
		}

	}

	.mianBody {
		width: 100%;
		position: relative;
		max-height: calc(100vh - 180rpx);
		overflow-y: auto;

	}

	.u-search__actiondata {
		position: relative;
	}

	.u-search__actiondata::before {
		display: block;
		content: '搜索';
		margin-left: 10rpx;
		position: absolute;
		right: 10rpx;
		z-index: 10;
		padding: 10rpx;
		width: 120rpx;
		height: 65%;
		line-height: 40rpx;
		color: white;
		background: #3db020;
		border-radius: 30rpx;
		text-align: center;
	}

	.edict-button {
		display: flex;
		justify-content: flex-end;
		padding-left: 352rpx;
		gap: 20rpx;
	}
</style>